<template>
	<view
		:style="{'min-width':width+'rpx',height:item.name?height+'rpx':'0rpx','border-radius':height/2+'rpx',border:!item.name||value==item.value?'none':''}"
		class="radio_item u-flex-xy-center" :class="get_class()" @click="change_tab(item)">
		<text>{{item.name}}</text>
	</view>
</template>

<script>
	import list from 'uview-ui/libs/config/props/list'
	export default {
		name: 'yyPicker',
		props: {
			value: {
				type: [Number, String, Array],
				default: () => {}
			},
			config: {
				type: Object,
				default: () => {}
			},
			mode: {
				type: String,
				default: () => {}
			},
			list: {
				type: [Array],
				default: () => {}
			},
			height: {
				type: [String, Number],
				default: () => {

				}
			},
			width: {
				type: [String, Number],
				default: () => {}
			}
		},
		computed: {
			modelValue: {
				get() {
					return this.value
				},
				set(value) {

					this.$emit('input', value)
				}
			},

		},
		watch: {
			// name(val){

			// 	this.$emit('input', val)
			// }
		},
		data() {
			return {
				item: this.config,
				indicatorStyle: `height: 48px;`,
				columns: [1, 2, 3]
			}
		},
		methods: {
			get_class() {
				if (this.modelValue == '') {
					return
				}
				if (this.mode == 'singleOption') {
					if (this.modelValue == this.item.name) {
						return 'radio_item_select'
					} else {
						return ''
					}
				} else if (this.mode == 'multipleSelection') {
					let array = this.modelValue.split(",")
					let exist = false

					array.forEach(it => {
						if (it == this.item.name) {
							exist = true
							return
						}
					})
					if (exist) {
						return 'radio_item_select'
					} else {
						return ''
					}
				}
			},
			change_tab(e) {
				if (this.mode == 'singleOption') {
					if (this.modelValue == e.value) {
						return
					}
					// e.is_select=true
					// this.$emit('change',e)
					this.$emit('input', e.name)
				} else if (this.mode == 'multipleSelection') {
					e.is_select = !e.is_select

					let modelValue = []
					if (this.modelValue == '') {
						modelValue = []
					} else {
						modelValue = this.modelValue.split(",")
					}
					if (modelValue.indexOf(e.name) > -1) {
						let index = modelValue.indexOf(e.name)
						modelValue.splice(index, 1)
					} else {
						modelValue.push(e.name)
					}
					this.$emit('change', e)
					this.$emit('input', modelValue.toString())
				}
				// return


			}
		}
	}
</script>

<style lang="scss">
	.radio_item {
		background: #FFFFFF;
		border: 2rpx solid #111111;
		color: #111111;
		margin-bottom: 33rpx;
		padding: 0 24rpx;
		box-sizing: border-box;

		text {
			font-size: 28rpx;
		}

		&.hidden {
			height: 0rpx;
			margin: 0, i !important;
			padding: 0 !important;
			border: none;
		}
	}

	.radio_item_select {
		background-color: #FF7612;
		border: none;
		color: #fff;
	}
</style>
